<%- contentFor('heroContent') %>
  <div class="hero-banner" style="background-color: #2c3e50;">
    <div class="hero-content">
      <h1>缓存管理控制台</h1>
      <p>仅用于开发环境</p>
    </div>
  </div>

  <div class="container" style="padding: 20px;">
    <div class="row">
      <div class="col-12">
        <h2>缓存状态</h2>
        <div class="alert alert-info">
          <p>本页面显示缓存状态信息，并提供缓存管理功能。这些功能对于开发和调试非常有用。</p>
        </div>

        <div id="cache-status">
          <% if (cacheStatus) { %>
            <% Object.keys(cacheStatus).forEach(function(cacheType) { %>
              <div class="card mb-4">
                <div class="card-header">
                  <h3>
                    <%= cacheType %> 缓存
                  </h3>
                </div>
                <div class="card-body">
                  <table class="table">
                    <thead>
                      <tr>
                        <th>数据类型</th>
                        <th>状态</th>
                        <th>缓存时长</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody>
                      <% Object.keys(cacheStatus[cacheType]).forEach(function(dataType) { %>
                        <tr>
                          <td>
                            <%= dataType %>
                          </td>
                          <td>
                            <% if (cacheStatus[cacheType][dataType].exists) { %>
                              <span class="badge bg-success">已缓存</span>
                              <% } else { %>
                                <span class="badge bg-secondary">未缓存</span>
                                <% } %>
                          </td>
                          <td>
                            <%= cacheStatus[cacheType][dataType].age %>
                          </td>
                          <td>
                            <button class="btn btn-sm btn-warning clear-cache-btn" data-cache-type="<%= cacheType %>"
                              data-data-type="<%= dataType %>">
                              清除
                            </button>
                          </td>
                        </tr>
                        <% }); %>
                    </tbody>
                  </table>
                  <div class="mt-3">
                    <button class="btn btn-danger clear-all-cache-btn" data-cache-type="<%= cacheType %>">
                      清除所有 <%= cacheType %> 缓存
                    </button>
                    <button class="btn btn-primary reload-cache-btn" data-cache-type="<%= cacheType %>">
                      重新加载 <%= cacheType %> 缓存
                    </button>
                  </div>
                </div>
              </div>
              <% }); %>
                <% } else { %>
                  <div class="alert alert-warning">
                    无法获取缓存状态信息
                  </div>
                  <% } %>
        </div>

        <div class="card mt-4">
          <div class="card-header">
            <h3>全局缓存操作</h3>
          </div>
          <div class="card-body">
            <button id="clear-all-caches" class="btn btn-danger">清除所有缓存</button>
            <button id="reload-all-caches" class="btn btn-primary">重新加载所有缓存</button>
            <button id="refresh-status" class="btn btn-secondary">刷新状态</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    .badge {
      padding: 0.35em 0.65em;
      font-size: 0.75em;
      color: white;
    }

    .bg-success {
      background-color: #28a745;
    }

    .bg-secondary {
      background-color: #6c757d;
    }

    .card {
      border: 1px solid rgba(0, 0, 0, 0.125);
      border-radius: 0.25rem;
    }

    .card-header {
      background-color: rgba(0, 0, 0, 0.03);
      border-bottom: 1px solid rgba(0, 0, 0, 0.125);
      padding: 0.75rem 1.25rem;
    }

    .card-body {
      padding: 1.25rem;
    }

    .table {
      width: 100%;
      margin-bottom: 1rem;
      color: #212529;
      border-collapse: collapse;
    }

    .table thead th {
      vertical-align: bottom;
      border-bottom: 2px solid #dee2e6;
    }

    .table td,
    .table th {
      padding: 0.75rem;
      vertical-align: top;
      border-top: 1px solid #dee2e6;
    }

    .btn {
      display: inline-block;
      font-weight: 400;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      user-select: none;
      border: 1px solid transparent;
      padding: 0.375rem 0.75rem;
      font-size: 1rem;
      line-height: 1.5;
      border-radius: 0.25rem;
      cursor: pointer;
    }

    .btn-sm {
      padding: 0.25rem 0.5rem;
      font-size: 0.875rem;
      line-height: 1.5;
      border-radius: 0.2rem;
    }

    .btn-primary {
      color: #fff;
      background-color: #007bff;
      border-color: #007bff;
    }

    .btn-secondary {
      color: #fff;
      background-color: #6c757d;
      border-color: #6c757d;
    }

    .btn-danger {
      color: #fff;
      background-color: #dc3545;
      border-color: #dc3545;
    }

    .btn-warning {
      color: #212529;
      background-color: #ffc107;
      border-color: #ffc107;
    }

    .alert {
      position: relative;
      padding: 0.75rem 1.25rem;
      margin-bottom: 1rem;
      border: 1px solid transparent;
      border-radius: 0.25rem;
    }

    .alert-info {
      color: #0c5460;
      background-color: #d1ecf1;
      border-color: #bee5eb;
    }

    .alert-warning {
      color: #856404;
      background-color: #fff3cd;
      border-color: #ffeeba;
    }

    .mt-3 {
      margin-top: 1rem;
    }

    .mt-4 {
      margin-top: 1.5rem;
    }

    .mb-4 {
      margin-bottom: 1.5rem;
    }
  </style>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // 清除特定缓存
      document.querySelectorAll('.clear-cache-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
          const cacheType = this.getAttribute('data-cache-type');

          if (confirm(`确定要清除 ${cacheType} 缓存吗？`)) {
            fetch(`/api/cache/clear/${cacheType}`, {
              method: 'POST',
            })
              .then(response => response.json())
              .then(data => {
                alert(data.message);
                location.reload();
              })
              .catch(error => {
                alert('操作失败: ' + error);
              });
          }
        });
      });

      // 清除特定类型的所有缓存
      document.querySelectorAll('.clear-all-cache-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
          const cacheType = this.getAttribute('data-cache-type');

          if (confirm(`确定要清除所有 ${cacheType} 缓存吗？`)) {
            fetch(`/api/cache/clear/${cacheType}`, {
              method: 'POST',
            })
              .then(response => response.json())
              .then(data => {
                alert(data.message);
                location.reload();
              })
              .catch(error => {
                alert('操作失败: ' + error);
              });
          }
        });
      });

      // 重新加载特定类型的缓存
      document.querySelectorAll('.reload-cache-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
          const cacheType = this.getAttribute('data-cache-type');

          if (confirm(`确定要重新加载 ${cacheType} 缓存吗？`)) {
            fetch(`/api/cache/reload/${cacheType}`, {
              method: 'POST',
            })
              .then(response => response.json())
              .then(data => {
                alert(data.message);
                location.reload();
              })
              .catch(error => {
                alert('操作失败: ' + error);
              });
          }
        });
      });

      // 清除所有缓存
      document.getElementById('clear-all-caches').addEventListener('click', function () {
        if (confirm('确定要清除所有缓存吗？')) {
          fetch('/api/cache/clear/all', {
            method: 'POST',
          })
            .then(response => response.json())
            .then(data => {
              alert(data.message);
              location.reload();
            })
            .catch(error => {
              alert('操作失败: ' + error);
            });
        }
      });

      // 重新加载所有缓存
      document.getElementById('reload-all-caches').addEventListener('click', function () {
        if (confirm('确定要重新加载所有缓存吗？这可能需要一些时间。')) {
          fetch('/api/cache/reload/all', {
            method: 'POST',
          })
            .then(response => response.json())
            .then(data => {
              alert(data.message);
              location.reload();
            })
            .catch(error => {
              alert('操作失败: ' + error);
            });
        }
      });

      // 刷新状态
      document.getElementById('refresh-status').addEventListener('click', function () {
        location.reload();
      });
    });
  </script>
